<template>
    <a-card :bordered="false">
        <div class="table-page-search-wrapper">
            <a-form layout="inline" :form="form" @submit="handleSubmit">
                <a-row :gutter="48">
                    <a-col :md="formItemCol" :sm="24">
                        <a-form-item label="场景关键字">
                            <a-input placeholder="请输入场景关键字" v-decorator="['name']" />
                        </a-form-item>
                    </a-col>

                    <a-col :md="formItemCol" :sm="24">
                        <a-form-item label="选择品牌">
                            <a-select v-decorator="['weId']" placeholder="请选择品牌" >
                                <a-select-option :value="item.weid" v-for="item in brand" :key="item.weid">
                                    {{ item.name }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="formItemCol" :sm="24">
                        <a-form-item label="选择类型">
                            <a-select v-decorator="['manageType']" placeholder="选择类型" >
                                <a-select-option value="直营"> 直营 </a-select-option>
                                <a-select-option value="经销"> 经销 </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :md="formItemCol" :sm="24">
              <a-form-item label="选择状态">
                <a-select v-decorator="['status']" placeholder="请选择状态">
                  <a-select-option value="N">
                    不可用
                  </a-select-option>
                  <a-select-option value="Y">
                    可用
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
                    <a-col :md="formItemCol" :sm="24">
                        <a-form-item label="门店编码">
                            <a-input placeholder="请输入门店编码" v-decorator="['code']" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="16" :sm="16" class="btn-group">
                        <span class="table-page-search-submitButtons">
                            <a-button type="primary" html-type="submit">查询</a-button>
                            <a-button style="margin-left: 8px" type="primary" @click="reset">重置</a-button>
                            <a-button type="primary" style="margin-left: 8px" @click="addStore">新增
                            </a-button>
                        </span>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <div style="margin-top: 20px">
            <a-table :scroll="{ x: '100%' }" :rowKey="(record) => record.code" :columns="columns" :data-source="list"
                bordered :loading="loading" :pagination="false">
                <img v-if="qnurl !== ''" slot="qnurl" slot-scope="qnurl" :src="qnurl" class="qrcode"
                    @click="preview(qnurl)" />
                <span slot="status" slot-scope="status">{{
                        status == "N" ? "不可用" : "可用"
                }}</span>
                <template slot="action" slot-scope="text, record">
                    <a href="javascript:;" @click="editAction(record)">编辑</a>
                    <a slot="action" v-if="record.qnurl == ''" class="ml-10" href="javascript:;"
                        @click="genCode(record.qrCodeId)">生成二维码</a>
                    <a href="javascript:;" class="ml-10" @click="showDeleteConfirm(record.code)">删除</a>
                </template>
            </a-table>
            <a-pagination class="pagination" :itemRender="itemRender" v-model="current" :showTotal="total => `共 ${total} 条`" show-size-changer :page-size.sync="size"
                :total="total" />
        </div>
        <div v-if="showAdd">
            <add-store :visible="true" :editInfo="editInfo" @close="closeAdd"></add-store>
        </div>

        <a-modal :visible="showPreview" title="二维码" @ok="colsePreview" @cancel="colsePreview">
            <div class="center">
                <img :src="previewUrl" class="preview-img" alt="" />
            </div>
        </a-modal>
        <a-modal v-model="showDelete" title="提示信息" @ok="deleteStore" @cancel="closeDetele">
            <p>确定要删除吗？</p>
        </a-modal>
    </a-card>
</template>
<script>
import { storeList, generateQrCode, deleteStore } from "@/api/micromall";
import addStore from "./add.vue";
const columns = [
    {
        title: "品牌",
        dataIndex: "brand",
        width: 120,
        align: "center",
    },
    {
        title: "门店编码",
        width: 100,
        align: "center",
        dataIndex: "code",
    },
    {
        title: "门店类型",
        width: 120,
        align: "center",
        dataIndex: "manageType",
    },
    {
        title: "门店名称",
        width: 300,
        align: "center",
        dataIndex: "name",
    },
    {
        title: "状态",
        dataIndex: "status",
        width: 100,
        align: "center",
        scopedSlots: { customRender: "status" },
    },
    {
        title: "所属城市",
        width: 120,
        align: "center",
        dataIndex: "city",
    },
    {
        title: "所属地区",
        width: 120,
        align: "center",
        dataIndex: "country",
    },
    {
        title: "详细地址",
        width: 300,
        align: "center",
        dataIndex: "address",
    },
    {
        title: "电话",
        width: 200,
        align: "center",
        dataIndex: "tel",
    },
    {
        title: "二维码",
        dataIndex: "qnurl",
        width: 120,
        align: "center",
        scopedSlots: { customRender: "qnurl" },
    },
    {
        title: "操作",
        dataIndex: "",
        width: 200,
        scopedSlots: { customRender: "action" },
        fixed: "right",
    },
];
export default {
    name: "storeCode",
    data() {
        return {
            scollx: {
                x: "100%",
            },
            showAdd: false,
            columns: columns,
            formItemCol: 8,
            form: this.$form.createForm(this),
            queryParam: {
                groupCardNo: "",
            },
            previewUrl: "",
            showPreview: false,
            list: [],
            total: 0,
            brand: [
                {
                    weid: 2738574294,
                    name: "JNBY",
                },
                {
                    weid: 2822095692,
                    name: "less",
                },
                {
                    weid: 2504948039,
                    name: "CROQUIS",
                },
                {
                    weid: 4,
                    name: "jnby by JNBY",
                },
                {
                    weid: 6924108367,
                    name: "Pomme de terre",
                },
                {
                    weid: 15,
                    name: "APN73",
                },
                {
                    weid: 8348044436,
                    name: "JNBYHOME",
                },
                {
                    weid: 11,
                    name: "Outlet",
                },
                {
                    weid: 5,
                    name: "江南布衣+",
                },
            ],
            current: 1,
            size: 10,
            loading: false,
            deleteCode: "",
            showDelete: false,
            editInfo: null,
        };
    },
    components: {
        addStore,
    },
    watch: {
        size(n, o) {
            if (n !== o) {
                this.getList();
            }
        },
        current(n, o) {
            if (n !== o) {
                this.getList();
            }
        },
    },
    mounted() {
        this.getList();
    },
    methods: {
        itemRender(current, type, originalElement) {
      if (type === 'prev') {
        return <a>上一页</a>;
      } else if (type === 'next') {
        return <a>下一页</a>;
      }
      return originalElement;
    },
        async deleteStore() {
            const re = await deleteStore({ code: this.deleteCode });
            if (re.code == 200) {
                this.$message.success("删除成功");
                this.deleteCode = null;
                this.showDelete = false;
                this.getList();
            }
            console.log(this.deleteCode);
        },
        closeDetele() {
            this.deleteCode = null;
            this.showDelete = false;
        },
        async genCode(qrCodeId) {
            const re = await generateQrCode({ qrCodeId });
            if (re.code == 200) {
                this.getList();
            }
        },
        closeAdd(showAdd) {
            this.showAdd = false;
            this.editInfo = null;
            if (showAdd) {
                this.getList();
            }
        },
        editAction(record) {
            this.editInfo = record;
            this.showAdd = true;
        },
        showTemp() { },
        showDeleteConfirm(code) {
            console.log(code);
            this.deleteCode = code;
            this.showDelete = true;
        },
        addStore() {
            this.showAdd = true;
        },
        onChange(e) { },
        onShowSizeChange(current, size) { },
        paginationChange(current, size) { },
        preview(url) {
            this.previewUrl = url;
            this.showPreview = true;
        },
        colsePreview() {
            this.previewUrl = "";
            this.showPreview = false;
        },
        async getList() {
            this.loading = true;
            const obj = this.form.getFieldsValue();
            const { current, size } = this;
            const re = await storeList({ current, size, ...obj });
            this.loading = false;
            if (re.code == 200) {
                this.list = re.data.records;
                this.total = re.data.total;
            }
        },
        async submit() {
            this.current = 1;
            this.getList();
        },
        reset() {
            this.form.resetFields();
            this.getList();
        },
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.submit(values);
                }
            });
        },
        // handleSelectChange(value) {
        //     this.form.setFieldsValue({
        //         note: `${value}`,
        //     });
        // },
    },
};
</script>
<style scoped>
.btn-group {
    display: flex;
    justify-content: flex-end;
}

.qrcode {
    width: 30px;
    height: 30px;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-img {
    width: 300px;
    height: 300px;
    margin: auto;
}

.ml-10 {
    margin-left: 10px;
}
.pagination{
    margin-top: 20px;display: flex;
    justify-content: flex-end;
}
</style>
